import './index.css';
import 'video.js/dist/video-js.css';
import videojs from 'video.js';

(function () {
    let player = videojs(
        'myVideo', {
            controls: true, // 是否显示控制条
            poster: 'http://photocdn.sohu.com/20120323/Img338614056.jpg', // 视频封面图地址
            preload: 'auto',
            autoplay: true,
            fluid: true, // 自适应宽高
            language: 'zh-CN', // 设置语言
            muted: false, // 是否静音
            inactivityTimeout: false,
            controlBar: {
                // 设置控制条组件
                /* 设置控制条里面组件的相关属性及显示与否
                    'currentTimeDisplay':true,
                    'timeDivider':true,
                    'durationDisplay':true,
                    'remainingTimeDisplay':false,
                    volumePanel: {
                      inline: false,
                    }
                    */
                /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
                children: [{
                    name: 'playToggle'
                }, // 播放按钮
                {
                    name: 'currentTimeDisplay'
                }, // 当前已播放时间
                {
                    name: 'progressControl'
                }, // 播放进度条
                {
                    name: 'durationDisplay'
                }, // 总时间
                {
                        // 倍数播放
                    name: 'playbackRateMenuButton',
                    playbackRates: [0.5, 1, 1.5, 2, 2.5]
                },
                {
                    name: 'volumePanel', // 音量控制
                    inline: false // 不使用水平方式
                },
                {
                    name: 'FullscreenToggle'
                } // 全屏
                ]
            },
            sources: [
                // 视频源
                {
                    src: 'https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm',
                    type: 'video/mp4'
                }
            ],
        },
        function () {
            console.log('视频可以播放了', this);
        }
    );

})();